<template>
    <view>
        <view class="myGoods">
            <view class="goods_box_1">
                <view @tap="changeTap(1)"> <view :class="tap_type===1 ?'check':'no_check'">全部</view></view>
                <view @tap="changeTap(2)"> <view :class="tap_type===2 ?'check':'no_check'">待发货</view></view>
                <view @tap="changeTap(3)"> <view :class="tap_type===3 ?'check':'no_check'">待收货</view></view>
                <view @tap="changeTap(4)"> <view :class="tap_type===4 ?'check':'no_check'">已收货</view></view>
            </view>
            <view v-if="orderList.length===0" >
                <mNodata></mNodata>
            </view>
            <view class="goods_box_2" v-else  v-for="(item,index) in orderList" :key="index">
                <view class="box_2_1">
                    <view class="box_2_1_1">订单编号:{{item.order_number}}</view>
                    <view class="box_2_1_2">
                        <view v-if="item.good_status===1">待发货</view>
                        <view v-if="item.good_status===2">待收货</view>
                        <view v-if="item.good_status===3">已完成</view>
                    </view>
                </view>
                <view class="box_2_2" v-for="(item1,index1) in item.order_info.product_info" :key="index1">
                    <view  class="box_2_2_1"><image class="box_2_2_1_img" :src="item1.image"/></view>
                    <view class="bpx_2_2_2">
                        <view class="goods_name">{{item1.product_name}}</view>
                        <view class="money_num_box">
                            <view class="money">￥{{item1.integral}}</view>
                            <view class="goods_num">{{item1.number}}{{item1.unit}}</view>
                        </view>
                    </view>
                </view>
                <view  class="box_2_3">
                    <view></view>
                    <view class="button_type" :data-order_id="item.order_id">
                        <view v-if="item.good_status===2" @tap="confirmOrder(item.order_number)"><button class="order_info_button">确认收货</button></view>
                        <view v-if="item.good_status===2" @tap="gowuliu(item.order_number)"><button class="order_info_button">查看物流</button></view>
                        <view @tap="goNext(item.order_number)"> <button class="order_info_button">订单信息</button></view>
                    </view>
                </view>
            </view>

        </view>

    </view>

</template>

<script>
    export default {
        name: "myGoods",
        data() {
            return {
                tap_type:1,
                orderList:[],
                page:1,
                is_load:0,
            }
        },
        mounted() {
            this.getOrderList()
        },
        onReachBottom() {  //分页加载请求数据
            if(this.is_load>0){
                this.page++
                this.getOrderList()
            }else{
                uni.showToast({
                    title:"没有更多数据啦",
                    icon:"none",
                })
            }

        },
        methods: {
            changeTap(res){  // 切换状态
                if(res===this.tap_type){
                    return
                }else{
                    this.tap_type=res
                    this.page=1
                    this.is_load=0
                    this.orderList=[]
                    this.getOrderList()
                }

            },
            goNext(order_number){
                this.$router.push({
                    route:this.$routesConfig.orderDetail,
                    query:{order_number:order_number}
                })
            },
            async getOrderList(){  //获取订单列表
                uni.showLoading({})
              let resData=await this.$apis.getOrderList({page:this.page,type:this.tap_type})
                if(resData.code===0){
                    this.orderList.push(...resData.data.lists)
                    this.is_load=resData.data.is_load
                }
                uni.hideLoading()
            },
            async confirmOrder(order_number){
                uni.showLoading({})
                let resData=await this.$apis.confirmOrder({order_number:order_number})
                if(resData.code===0){
                    uni.hideLoading()
                    uni.showToast({
                        title:"操作成功",
                        icon:"success",
                    })
                    this.page=1
                    this.is_load=0
                    this.orderList=[]
                    await  this.getOrderList()
                }

            },
            gowuliu(order_number){ // 物流页面
                this.$router.push({
                    route:this.$routesConfig.shipDetail,
                    query:{order_number:order_number}
                })
            }
        }

    }
</script>
<style>
    page {
        background-color:#FAFAFA
    }
</style>
<style lang="less" scoped>
    .goods_box_1{
        background-color: #ffffff;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        font-size:28rpx;
        border-top: solid 0.1px #E5E5E5;
        padding-top: 25rpx;
    }
    .no_check{
        color:#333333;
        padding-bottom: 20rpx;
    }
    .check{
        color:#FD9107;
        border-bottom: solid 0.1px #FD9107;
        padding-bottom: 20rpx;
    }
    .box_2_1{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-size: 26rpx;
        padding-top: 20rpx;
        padding-bottom: 30rpx;
        padding-right: 30rpx;
        padding-left: 30rpx;
        border-bottom: solid 0.1px #E5E5E5;
    }
    .goods_box_2{
        background-color: #ffffff;
        margin-top: 20rpx;

    }
    .box_2_1_2{
        color: #FF9502;
    }
    .box_2_2{
        display: flex;
        flex-direction: row;
        border-bottom: solid 0.1px #E5E5E5;
    }
    .money_num_box{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .bpx_2_2_2{
        width: 100%;
    }
    .box_2_2_1_img{
        height: 150rpx;
        width: 150rpx;
        margin-left: 20rpx;
    }
    .goods_name{
        font-size: 28rpx;
        color: #333333;
        width: 85%;
        margin-top: 10rpx;
    }
    .money{
        color: #FF8F01;
        font-size: 28rpx;
    }
    .goods_num{
        font-size: 24rpx;
        color: #666666;
    }
    .money_num_box{
        width: 85%;
        margin-top: 50rpx;
    }
    .order_info_button{
        border: none;
        background-image: linear-gradient(to top, #E96231,#E79A38);
        color: #ffffff;
        font-size: 27rpx;
        width: 140rpx;
        height: 60rpx;
        padding-left: 10rpx;
        padding-right: 10rpx;
        padding-bottom: 10rpx;
        line-height: 2.3;
        margin-right: 20rpx;

    }
    .box_2_3{
        background-color: #ffffff;
        padding-bottom: 20rpx;
        padding-top: 20rpx;
        text-align: right;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

    }
    .button_type{
        display: flex;
        flex-direction: row;
    }
</style>
